<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>用户列表</title>
<style>
  /* 添加一些基本的样式 */
  body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    text-align: center;
  }

  h2 {
    color: #333;
  }

  table {
    border-collapse: collapse;
    width: 80%;
    margin: 20px auto;
    background-color: #fff;
  }

  table, th, td {
    border: 1px solid #ccc;
  }

  th, td {
    padding: 10px;
    text-align: left;
  }

  tr:nth-child(even) {
    background-color: #f2f2f2;
  }

  a.button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    text-decoration: none;
    margin-bottom: 10px;
  }

  a.button:hover {
    background-color: #0056b3;
  }
</style>
</head>
<body>
  <a class="button" th:href="@{/manong/addTeacher}">添加教师</a>

  <h2>用户列表</h2>
  <table>
    <tr>
      <th>职工号</th>
      <th>姓名</th>
      <th>性别</th>
      <th>密码</th>
      <th>职称</th>
      <th>身份证号</th>
      <th>所属学院</th>
      <th>电话号码</th>
      <th>操作</th>
    </tr>
    <tr th:each="u:${teacherList}">
      <td th:text="${u.eno}"></td>
      <td th:text="${u.name}"></td>
      <td th:text="${u.sex}"></td>
      <td th:text="${u.password}"></td>
      <td th:text="${u.title}"></td>
      <td th:text="${u.id}"></td>
      <td th:text="${u.college}"></td>
      <td th:text="${u.phone}"></td>
      <td>
        <a class="button" th:href="@{/manong/updateTeacher(eno=${u.eno})}">修改</a>
        <a class="button" th:href="@{/manong/deleteTeacher(eno=${u.eno})}" onclick="return confirm('确定要删除吗')">删除</a>
      </td>
    </tr>
  </table>

  <!-- 添加一些JavaScript效果 -->
  <script>
    // 点击"修改"和"删除"按钮时添加动画效果
    const buttons = document.querySelectorAll('.button');
    buttons.forEach(button => {
      button.addEventListener('mouseover', () => {
        button.style.transform = 'scale(1.1)';
        button.style.transition = 'transform 0.2s';
      });
      button.addEventListener('mouseout', () => {
        button.style.transform = 'scale(1)';
      });
    });
  </script>
</body>
</html>

